<template>
  <div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 企业基本信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="200px" :model="loanInfo" :inline="true">
        <el-form-item label="企业名称">
          <el-input v-model="loanInfo.name" disabled />
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input v-model="loanInfo.code" disabled />
        </el-form-item>
        <el-form-item label="担保人与经营实体关系">
          <el-input v-model="loanInfo.relation" disabled> </el-input>
        </el-form-item>
        <el-form-item label="企业性质">
          <el-input v-model="loanInfo.property" disabled> </el-input>
        </el-form-item>
        <el-form-item label="企业地址">
          <el-input v-model="loanInfo.address" disabled />
        </el-form-item>
        <el-form-item label="经营场所所有权">
          <el-input v-model="loanInfo.ownership" disabled />
        </el-form-item>
        <el-form-item label="本行业从业时间">
          <el-input v-model="loanInfo.workingTime" disabled />
        </el-form-item>
        <el-form-item label="企业资产合计">
          <el-input v-model="loanInfo.totalAssets" disabled />
        </el-form-item>
        <el-form-item label="企业负债合计">
          <el-input v-model="loanInfo.totalLiabilities" disabled />
        </el-form-item>
        <el-form-item label="企业净资产">
          <el-input v-model="loanInfo.netAssets" disabled />
        </el-form-item>
        <el-form-item label="企业年支出">
          <el-input v-model="loanInfo.yearExpenses" disabled />
        </el-form-item>
        <el-form-item label="股东在五行是否有未结清担保">
          <el-switch v-model="loanInfo.ownerLoanBank" class="mb-2" active-text="是" inactive-text="否" active-value="1" inactive-value="0" disabled />
        </el-form-item>
        <el-form-item label="企业在我行是否有未结清担保">
          <el-switch v-model="loanInfo.loanBank" class="mb-2" active-text="是" inactive-text="否" active-value="1" inactive-value="0" disabled />
        </el-form-item>
      </el-form>
      <el-row class="bgc">
        <el-col :span="24"> 影像采集</el-col>
      </el-row>
      <div class="box_flex">
        <div class="box" v-for="(item, index) in imgList" :key="index">
          <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
          <div v-else class="img_box">暂无图片</div>
        </div>
      </div>
    </div>
    <div>
      <el-row class="bgc">
        <el-col :span="24"> 经营实体财务信息</el-col>
      </el-row>
      <el-form :label-position="labelPosition" label-width="200px" :model="companyFinance" :inline="true">
        <el-form-item label="近一年度营业总收入">
          <el-input v-model="companyFinance.income" disabled />
        </el-form-item>
        <el-form-item label="上一年度营业总收入">
          <el-input v-model="companyFinance.lastIncome" disabled />
        </el-form-item>
        <el-form-item label="近一年度营业总成本">
          <el-input v-model="companyFinance.cost" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度营业总成本">
          <el-input v-model="companyFinance.lastCost" disabled> </el-input>
        </el-form-item>
        <el-form-item label="近一年度营业利润">
          <el-input v-model="companyFinance.profit" disabled />
        </el-form-item>
        <el-form-item label="上一年度营业利润">
          <el-input v-model="companyFinance.lastProfit" disabled />
        </el-form-item>
        <el-form-item label="近一年度利润总额">
          <el-input v-model="companyFinance.totalProfit" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度利润总额">
          <el-input v-model="companyFinance.lastTotalProfit" disabled> </el-input>
        </el-form-item>
        <el-form-item label="近一年度所得税">
          <el-input v-model="companyFinance.incomeTax" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度所得税">
          <el-input v-model="companyFinance.lastIncomeTax" disabled> </el-input>
        </el-form-item>
        <el-form-item label="近一年度净利润">
          <el-input v-model="companyFinance.netProfit" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度净利润">
          <el-input v-model="companyFinance.lastNetProfit" disabled> </el-input>
        </el-form-item>
        <el-form-item label="近一年度营业利润率(%)">
          <el-input v-model="companyFinance.profitRate" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度营业利润率(%)">
          <el-input v-model="companyFinance.lastProfitRate" disabled> </el-input>
        </el-form-item>
        <el-form-item label="近一年度净利率(%)">
          <el-input v-model="companyFinance.netProfitRate" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度净利率(%)">
          <el-input v-model="companyFinance.lastNetProfitRate" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度财报收入环比下降比例">
          <el-input v-model="companyFinance.qoq" disabled> </el-input>
        </el-form-item>
        <el-form-item label="上一年度财报资产负债率">
          <el-input v-model="companyFinance.debt" disabled> </el-input>
        </el-form-item>
        <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <div class="box_flex">
          <div class="box" v-for="(item, index) in srcList" :key="index">
            <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
            <div v-else class="img_box">暂无图片</div>
          </div>
        </div>
      </el-form>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24"> 经营实体流水信息</el-col>
      </el-row>
      <div v-for="(item, index) in companyFlowList" :key="index">
        <el-row class="bgc">
          <el-col :span="24"> 交易账户基本信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="200px" :model="item" :inline="true">
          <el-form-item label="流水类别">
            <el-input v-model="item.flowType" disabled />
          </el-form-item>
          <el-form-item label="账户类别">
            <el-input v-model="item.accountType" disabled />
          </el-form-item>
          <el-form-item label="交易账户名称">
            <el-input v-model="item.name" disabled> </el-input>
          </el-form-item>
          <el-form-item label="账户开立日期">
            <el-input v-model="item.accountDate" disabled> </el-input>
          </el-form-item>
          <el-form-item label="交易账户/卡号">
            <el-input v-model="item.cardNo" disabled />
          </el-form-item>
          <el-form-item label="首笔进账日期">
            <el-input v-model="item.firstIncomeDate" disabled />
          </el-form-item>
          <el-form-item label="交易账户所在行">
            <el-input v-model="item.bankName" disabled />
          </el-form-item>
          <el-form-item label="最近一笔进账日期">
            <el-input v-model="item.lastIncomeDate" disabled />
          </el-form-item>
          <el-form-item label="是否本行">
            <el-switch v-model="item.thisBank" class="mb-2" active-text="是" inactive-text="否" active-value="1" inactive-value="0" disabled />
          </el-form-item>
        </el-form>
        <el-row class="bgc">
          <el-col :span="24">近1年交易流水明细</el-col>
        </el-row>

        <el-row>
          <div class="table-css">
            <div>第1月</div>
            <div>{{ item.one }}</div>
          </div>
          <div class="table-css">
            <div>第2月</div>
            <div>{{ item.two }}</div>
          </div>
          <div class="table-css">
            <div>第3月</div>
            <div>{{ item.three }}</div>
          </div>
          <div class="table-css">
            <div>第4月</div>
            <div>{{ item.four }}</div>
          </div>
          <div class="table-css">
            <div>第5月</div>
            <div>{{ item.five }}</div>
          </div>
          <div class="table-css">
            <div>第6月</div>
            <div>{{ item.six }}</div>
          </div>
          <div class="table-css">
            <div>第7月</div>
            <div>{{ item.seven }}</div>
          </div>
          <div class="table-css">
            <div>第8月</div>
            <div>{{ item.eight }}</div>
          </div>
          <div class="table-css">
            <div>第9月</div>
            <div>{{ item.nine }}</div>
          </div>
          <div class="table-css">
            <div>第10月</div>
            <div>{{ item.ten }}</div>
          </div>
          <div class="table-css">
            <div>第11月</div>
            <div>{{ item.eleven }}</div>
          </div>
          <div class="table-css">
            <div>第12月</div>
            <div>{{ item.twelve }}</div>
          </div>
          <div class="table-last">
            <div>近一年合计</div>
            <div>{{ item.totalYear }}</div>
          </div>
          <div class="table-last">
            <div>近一年账户结息总额</div>
            <div>{{ item.totalInterest }}</div>
          </div>
        </el-row>
        <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item.imgPath}`" lazy style="width: 200px; height: 200px" v-if="item.imgPath != '' && item.imgPath != null" />
        <div v-else class="img_box">暂无图片</div>
      </div>
    </div>

    <div>
      <el-row class="bgc">
        <el-col :span="24"> 经营实体主要资产信息</el-col>
      </el-row>
      <div v-for="(item, index) in companyHouseList" :key="index">
        <el-row class="bgc">
          <el-col :span="24"> 房产信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item.houseInfo" :inline="true">
          <el-form-item label="产权编号">
            <el-input v-model="item.houseInfo.no" disabled />
          </el-form-item>
          <el-form-item label="登记日期">
            <el-input v-model="item.houseInfo.registerDate" disabled />
          </el-form-item>
          <el-form-item label="土地使用终止日期">
            <el-input v-model="item.houseInfo.endDate" disabled />
          </el-form-item>
          <el-form-item label="面积(平方米)">
            <el-input v-model="item.houseInfo.area" disabled />
          </el-form-item>
          <el-form-item label="房产性质">
            <el-input v-model="item.houseInfo.property" disabled />
          </el-form-item>
          <el-form-item label="房产详细地址">
            <el-input v-model="item.houseInfo.address" disabled />
          </el-form-item>
          <el-form-item label="土地性质">
            <el-input v-model="item.houseInfo.landProperty" disabled />
          </el-form-item>
          <el-form-item label="评估价值(人工)">
            <el-input v-model="item.houseInfo.appraised" disabled />
          </el-form-item>
          <el-form-item label="房屋结构">
            <el-input v-model="item.houseInfo.build" disabled />
          </el-form-item>
        </el-form>
        <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item.houseInfo.imgPath}`" lazy style="width: 200px; height: 200px" v-if="item.houseInfo.imgPath != '' && item.houseInfo.imgPath != null" />
        <div v-else class="img_box">暂无图片</div>
        <el-row class="bgc">
          <el-col :span="24"> 权利人信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item.ownerList[0]" :inline="true">
          <el-form-item label="权属情况">
            <el-input v-model="item.ownerList[0].ownership" disabled />
          </el-form-item>
          <el-form-item label="权利人名称">
            <el-input v-model="item.ownerList[0].name" disabled />
          </el-form-item>
          <el-form-item label="权利人证件号">
            <el-input v-model="item.ownerList[0].idNo" disabled />
          </el-form-item>
          <el-form-item label="房产份额">
            <el-input v-model="item.ownerList[0].share" disabled />
          </el-form-item>
        </el-form>
      </div>

      <div v-for="(item, index) in companyCarList" :key="index">
        <el-row class="bgc">
          <el-col :span="24"> 车辆信息</el-col>
        </el-row>
        <el-form :label-position="labelPosition" label-width="140px" :model="item" :inline="true">
          <el-form-item label="合计购买价格(元)">
            <el-input v-model="item.totalPrice" disabled />
          </el-form-item>
          <el-form-item label="合计担保余额(元)">
            <el-input v-model="item.totalLoan" disabled />
          </el-form-item>
          <el-form-item label="所有权人">
            <el-input v-model="item.owner" disabled />
          </el-form-item>
          <el-form-item label="品牌型号">
            <el-input v-model="item.brand" disabled />
          </el-form-item>
          <el-form-item label="购买时间">
            <el-input v-model="item.buyDate" disabled />
          </el-form-item>
          <el-form-item label="购买价格">
            <el-input v-model="item.buyPrice" disabled />
          </el-form-item>
          <el-form-item label="担保余额(元)">
            <el-input v-model="item.loan" disabled />
          </el-form-item>
          <el-form-item label="车牌号码">
            <el-input v-model="item.carNo" disabled />
          </el-form-item>
        </el-form>
        <el-row class="bgc">
          <el-col :span="24"> 影像采集</el-col>
        </el-row>
        <div class="box_flex">
          <div class="box" v-for="(item, index) in carList" :key="index">
            <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
            <div v-else class="img_box">暂无图片</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
import { reactive, ref, nextTick } from "vue";
import { queryOrgTree } from "@/api/org";
import { onMounted } from "vue";
import { ElMessageBox, ElTree } from "element-plus";

const treeRef = ref();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const tableList = ref([]);
const loading = ref(false);
const props = defineProps({
  dataFrom: {
    type: Object,
    required: true,
  },
});
const labelPosition = ref("right");
const state = reactive({
  loanInfo: {},
  companyFinance: {},
  companyFlowList: {},
  companyHouseList: {},
  companyCarList: {},
  imgList: [],
  srcList: [],
  carList: [],
  formLabelAlign: {
    branchName: "", //支行名称
  },
  lists: [], //展示菜单项
});
const { formLabelAlign, loanInfo, companyFinance, srcList,carList, companyFlowList, companyHouseList, companyCarList, imgList } = toRefs(state);
onMounted(() => {
  setTimeout(() => {
    loanInfo.value = props.dataFrom.companyInfo;
    companyFinance.value = props.dataFrom.companyFinance;
    companyFlowList.value = props.dataFrom.companyFlowList;
    companyHouseList.value = props.dataFrom.companyHouseList;
    companyCarList.value = props.dataFrom.companyCarList;

    if (loanInfo.value.imgPath != null && loanInfo.value.imgPath != "") {
      imgList.value = loanInfo.value.imgPath.split(",");
    } else {
      loanInfo.value.imgPath = "";
      imgList.value = loanInfo.value.imgPath.split(",");
    }
    if (companyFinance.value.imgPath != null && companyFinance.value.imgPath != "") {
      srcList.value = companyFinance.value.imgPath.split(",");
    } else {
      companyFinance.value.imgPath = "";
      srcList.value = companyFinance.value.imgPath.split(",");
    }
    if (companyCarList.value[0].imgPath != null && companyCarList.value[0].imgPath != "") {
      carList.value = companyCarList.value[0].imgPath.split(",");
    } else {
      companyCarList.value[0].imgPath = "";
      carList.value = companyCarList.value[0].imgPath.split(",");
    }
  }, 400);
});

// 添加
function staffAdd() {}

//查询角色列表
function getList(val) {}

//查看
function handleEditTable(val) {
  if (val.type == "个人") {
    router.push({ path: "private" });
  } else {
    router.push({ path: "corporate" });
  }
}

// getList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: left;
  span {
    display: block;
    padding-top: 5px;
    margin-left: 5px;
  }
}

.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}

.table-css {
  width: 110px;
  text-align: center;
  font-size: 16px;
  border: 1px solid #f2f2f2;
  :first-child {
    height: 36px;
    line-height: 36px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
  }
  :last-child {
    height: 36px;
    line-height: 36px;
  }
}
.table-last {
  width: 160px;
  font-size: 16px;
  text-align: center;
  border: 1px solid #f2f2f2;
  :first-child {
    box-sizing: border-box;
    height: 36px;
    line-height: 36px;
    background-color: #f2f2f2;
    margin-bottom: 10px;
  }
  :last-child {
    height: 30px;
    line-height: 30px;
  }
}

.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  padding-left: 20px;
}

:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}

:deep(.el-overlay-dialog) {
  top: 500vh;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}

.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-affix) {
  width: 100% !important;
}
</style>
